<html>
<head>
<style>
@font-face {
  font-family: font1;
  src: local(Courier), local('Courier New'), local(Cousine Regular); /* Use monospace font */
  unicode-range: U+0041; /* 'A' */
}

@font-face {
  font-family: font2;
  src: local(Arial), local(Arimo Regular);
  unicode-range: U+006d; /* 'm' */
}

.test1 {
  font-size: 100px;
  font-family: font1, Arial;
  background: blue;
}

.test2 {
  font-size: 100px;
  font-family: font2, Courier, 'Courier New';
  background: green;
}

.ref {
  font-size: 100px;
  font-family: Arial;
  background:red;
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<span id="test1" class="test1">m</span><br/>
<span id="test2" class="test2">m</span><br/>
<span id="ref" class="ref">m</span>
<script>
description('@font-face should not affect width of characters outside of its unicode-range');
window.jsTestIsAsync = true;
document.fonts.ready.then(() => {
  shouldBe("document.getElementById('test1').offsetWidth", "document.getElementById('ref').offsetWidth");
  shouldBe("document.getElementById('test2').offsetWidth", "document.getElementById('ref').offsetWidth");
  finishJSTest();
});
</script>
</body>
</html>
